window.onload = async function () {
  const res = await axios({ url: '/dashboard' })
  const { year, salaryData, groupData } = res.data
  console.log(res.data)
  // 设置标题部分
  for (const key in res.data.overview) {
    document.querySelector(`[name="${key}"]`).innerHTML = res.data.overview[key]
  }
  // 薪资走向
  renderSubject(year)
  // 班级薪资
  renderClass(salaryData)
  // 每组薪资
  renderClassSalary(groupData)
  // 男女薪资走向
  renderGenderSalary(salaryData)
  //
  renderjiguan()
}

function renderSubject(arr) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('line'))

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '2022全学科走势',
      top: 10,
      left: 10
    },
    xAxis: {
      type: 'category',
      data: arr.map((item) => item.month),
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: 'skyblue'
        }
      },
      axisLabel: {
        color: '#000'
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'skyblue'
        }
      }
    },
    series: [
      {
        data: arr.map((item) => item.salary),
        type: 'line',
        smooth: true,
        symbolSize: 10,
        lineStyle: {
          width: 8,
          color: '#5f8eff'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#c8e2ff' // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: '#fff' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

function renderClass(arr) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('salary'))

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '班级薪资分布',
      top: 10,
      left: 10
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: arr.map((item) => ({
          value: item.g_count + item.b_count,
          name: item.label
        }))
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

function renderClassSalary(obj) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('lines'))

  // 指定图表的配置项和数据
  var option = (option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'bar'
      },
      {
        data: [],
        type: 'bar'
      }
    ],
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#3ad39c' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#e4fefc' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#55b1ff' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#e4fefc' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }
    ]
  })

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)

  // 渲染标题列表
  let str = ''
  for (const key in obj) {
    str += `<button type="button" class="btn btn-xs">${key}</button>`
  }
  document.querySelector('#btns').innerHTML = str

  // 点击切换 排他思想
  const btnList = document.querySelectorAll('#btns button')
  btnList.forEach((btn) => {
    btn.onclick = function () {
      for (let i = 0; i < btnList.length; i++) {
        btnList[i].classList.remove('btn-blue')
      }
      this.classList.add('btn-blue')

      const index = this.innerHTML
      myChart.setOption({
        xAxis: {
          data: obj[index].map((item) => item.name)
        },
        series: [
          {
            type: 'bar',
            data: obj[index].map((item) => item.salary)
          },
          {
            type: 'bar',
            data: obj[index].map((item) => item.hope_salary)
          }
        ]
      })
    }
  })
  btnList[0].click()
}

function renderGenderSalary(arr) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('gender'))

  // 指定图表的配置项和数据
  var option = {
    title: [
      {
        text: '男女薪资分布',
        letf: '10%',
        top: '1%'
      },
      {
        subtext: '男生',
        left: '50%',
        top: '35%',
        textAlign: 'center'
      },
      {
        subtext: '女生',
        left: '50%',
        top: '90%',
        textAlign: 'center'
      }
    ],
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['15%', '25%'],
        data: arr.map((item) => ({
          value: item.b_count,
          name: item.label
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        center: ['50%', '20%']
      },
      {
        name: 'Access From',
        type: 'pie',
        radius: ['15%', '25%'],
        data: arr.map((item) => ({
          value: item.g_count,
          name: item.label
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        center: ['50%', '70%']
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

function renderjiguan() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('map'))

  // 指定图表的配置项和数据
  /* 
请勿在原图上直接修改保存
*/
  function mapTooltipClick(name) {
    alert(name)
  }

  function tooltipCharts() {
    console.log(arguments[0])
    var myChart1 = echarts.init(document.getElementById('tooltipBarId'))
    var option = {
      tooltip: {},
      dataset: {
        source: [
          ['xAxis', '201701', '201702', '201703', '201704', '201705', '201706', '201707', '201708', '201709', '20170', '201710', '20170', '201801'],
          ['amount', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1, 53.3, 83.8]
        ]
      },
      xAxis: {
        type: 'category',
        interval: true,
        axisLabel: {
          rotate: 45
        },
        axisTick: {
          show: false
        }
      },
      yAxis: {},
      color: ['#4FA8F9', '#F5A623'],
      grid: {
        show: true,
        backgroundColor: '#FAFAFA',
        left: 30,
        right: 20,
        top: 20
      },
      series: [
        {
          type: 'bar',
          smooth: true,
          seriesLayoutBy: 'row',
          barWidth: 10
        }
      ]
    }
    myChart1.setOption(option)
  }
  option = {
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: false,
      orient: 'horizontal',
      inRange: {
        color: ['#e0ffff', '#006edd'],
        symbolSize: [30, 100]
      }
    },
    tooltip: {
      padding: 8,
      enterable: true,
      transitionDuration: 1,
      textStyle: {
        color: '#fff',
        decoration: 'none'
      }
    },
    series: [
      {
        name: '接入医院数量',
        type: 'map',
        mapType: 'china',
        itemStyle: {
          normal: {
            label: {
              show: false
            }
          },
          emphasis: {
            label: {
              show: true
            }
          }
        },
        label: {
          normal: {
            //静态的时候展示样式
            show: true, //是否显示地图省份得名称
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          emphasis: {
            //动态展示的样式
            color: '#fff'
          }
        },
        data: [
          {
            name: '北京',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '天津',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '上海',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '重庆',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '河北',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '河南',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '云南',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '辽宁',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '黑龙江',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '湖南',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '安徽',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '山东',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '新疆',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '江苏',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '浙江',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '江西',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '湖北',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '广西',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '甘肃',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '山西',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '内蒙古',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '陕西',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '吉林',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '福建',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '贵州',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '广东',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '青海',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '西藏',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '四川',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '宁夏',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '海南',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '台湾',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '香港',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          },
          {
            name: '澳门',
            value: Math.round(Math.random() * 1000),
            tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
          }
        ]
      }
    ]
  }
  var count = 0
  var timeTicket = null
  var dataLength = option.series[0].data.length
  timeTicket && clearInterval(timeTicket)
  timeTicket = setInterval(function () {
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
    })
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: count % dataLength
    })
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: count % dataLength
    })
    count++
  }, 1000)

  myChart.on('mouseover', function (params) {
    console.log(params)
    clearInterval(timeTicket)
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
    })
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: params.dataIndex
    })
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: params.dataIndex
    })
  })
  myChart.on('mouseout', function (params) {
    timeTicket && clearInterval(timeTicket)
    timeTicket = setInterval(function () {
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
      })
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: count % dataLength
      })
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: count % dataLength
      })
      count++
    }, 1000)
  })

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
